<!-- 用户列表 -->
<template>
    <div class="DealerInfoStyle">
        <div class="cardAdmin">
            <div class="fgwqefwqefewr13413fsaf">
                <div style="position: absolute;right: 10px;bottom: 5px;padding-top: 10px;">
                    <el-button type="success" icon="el-icon-circle-plus-outline" size="small"
                        @click="addbtn()">新增用户</el-button>
                </div>
            </div>
        </div>

        <!-- 表格 -->
        <el-table :data="CompanyTable" border style="width: 100%;min-height: 78%;max-height: 78%;overflow: auto;">
            <el-table-column resizable prop="id" label="id" width="60" align="center">
            </el-table-column>
            <el-table-column resizable prop="zh_tw_name" label="名称" width="auto" min-width="200px" align="center">
            </el-table-column>
            <el-table-column resizable prop="zh_tw_description" label="描述" width="auto" min-width="200px" align="center">
            </el-table-column>
            <el-table-column resizable prop="sort" label="排序" width="auto" min-width="80px" align="center">
            </el-table-column>
            <el-table-column resizable prop="avatar_url" label="头像" width="auto" min-width="200px" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 50px;height:20px" :src="'' + scope.row.headimg"
                        :preview-src-list="['' + scope.row.headimg]">
                        <div slot="error" class="image-slot" style="width: 50px;">
                            <div style="width: 50px;">{{ scope.row.headimg == '' ? '加载失败' : '空图片或者地址错误' }}</div>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column resizable prop="add_time" label="创建时间" width="auto" min-width="200px" align="center">
            </el-table-column>
            <el-table-column resizable label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button @click="tableEditing(scope.row)" type="primary" plain size="small">编辑</el-button>
                    <el-button @click="del_teacherDelete(scope.row.id)" type="danger" plain size="small">刪除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹窗 -->
        <el-dialog :close-on-click-modal="false" :title="titles" :visible.sync="dialogVisible" width="70%"
            @close="handleClose" top="15vh">
            <div class="pop-up-form">
                <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
                    <div style="flex: 1;display: flex;">
                        <span
                            style="flex: 1; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">头像：</span>
                        <input style="flex: 6;line-height: 40px;margin-left:0" type="file" ref="fileInput1"
                            id="roleHeadgear" accept="image/*" @change="handleFileChange" required />

                    </div>
                </div>
                <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
                    <div style="flex: 1;display: flex;">
                        <span
                            style="flex: 1; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">老师名称繁体：</span>
                        <el-input style="flex: 6;" v-model="addform.zh_tw_name"></el-input>

                    </div>
                </div>
                <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
                    <div style="flex: 1;display: flex;">
                        <span
                            style="flex: 1; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">老师名称英文：</span>
                        <el-input style="flex: 6;" v-model="addform.en_name"></el-input>
                    </div>
                </div>
                <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
                    <div style="flex: 1;display: flex;">
                        <span
                            style="flex: 1; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">老师简介：</span>
                        <el-input maxlength="180" show-word-limit style="flex: 6;"
                            v-model="addform.zh_tw_description"></el-input>

                    </div>
                </div>
                <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
                    <div style="flex: 1;display: flex;">
                        <span
                            style="flex: 1; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">排序：</span>
                        <el-input style="flex: 6;" v-model="addform.sort"></el-input>

                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button v-show="titles == '新增'" type="primary" @click="add_teacherAdded()" size="small">确
                    定</el-button>
                <el-button v-show="titles == '编辑'" type="primary" @click="upd_teacherEditor()" size="small">更
                    新</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { teacherList, teacherAdded, teacherEditor, teacherDelete } from "@/utils/api";
export default {
    name: 'laosInfo',
    data() {
        return {
            addform: {
                zh_tw_name: '',
                zh_tw_description: '',
                sort: '',
                en_name: '',
            },
            CompanyTable: [],
            dialogVisible: false,
            titles: '',
            roleHeadgear: null,

        };
    },
    mounted() {
        this.get_teacherList()
    },

    methods: {
        handleFileChange(event) {
            this.roleHeadgear = event.target.files[0];
            if (this.roleHeadgear) {
                this.$message.success('上传成功')
            }
        },
        // 查询用户列表
        async get_teacherList() {
            // let data = {};
            // data.page = this.currentPage
            const res = await teacherList().catch((err) => {
                return console.error(err);
            });

            if (res && res.status == "200") {
                this.$message.success(res.data.message);
                this.CompanyTable = res.data.data
            } else {
                this.$message.error(res.data.message);
            }
        },
        // 新增用户
        async add_teacherAdded() {
            let data = new FormData();

            // 遍历 addform 中的每个字段
            Object.keys(this.addform).forEach(key => {
                const value = this.addform[key];

                // 检查是否是有效的值
                if (value !== null && value !== undefined && value !== '') {
                    data.append(key, value);  // 将有效的键值对添加到 FormData
                }
            });
            if (this.roleHeadgear) {
                data.append('avatar_url', this.roleHeadgear);  // 将有效的键值对添加到 FormData

            }
            const res = await teacherAdded(data).catch((err) => {
                this.$message.error(err.response.data.message)
                return console.error(err);
            });
            if (res && res.data?.code == "200") {
                this.$message.success(res.data.message);
                this.get_teacherList()
                this.$refs.fileInput1.value = null
                this.dialogVisible = false
            } else {
                this.$message.error(res.data.message);
            }
        },
        // 更新用户
        async upd_teacherEditor() {
            let data = new FormData();

            data.append('id', this.addform.id);

            if (this.addform.sort) data.append('sort', Number(this.addform.sort));
            if (this.addform.zh_tw_description) data.append('zh_tw_description', this.addform.zh_tw_description);
            if (this.addform.zh_tw_name) data.append('zh_tw_name', this.addform.zh_tw_name);
            if (this.addform.en_name) data.append('en_name', this.addform.en_name);
            if (this.roleHeadgear) data.append('avatar_url', this.roleHeadgear);
            const res = await teacherEditor(data).catch((err) => {
                return console.error(err);
            });
            if (res && res.data?.code == "200") {
                this.$message.success(res.data.message);
                this.dialogVisible = false
                this.$refs.fileInput1.value = null
                this.get_teacherList()
            } else {
                this.$message.error(res.data.error);
            }
        },
        // 刪除用户
        async del_teacherDelete(id) {
            try {
                await this.$confirm("是否继续执行操作？", "提示", {
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    type: "warning",
                });
                const res = await teacherDelete(id).catch((err) => {
                    return console.error(err);
                });

                if (res && res.status == "200") {
                    this.$message.success(res.data.message);
                    this.dialogVisible = false;
                    this.get_teacherList();
                } else {
                    this.$message.error(res.data.message);
                }
            } catch (error) {
                // 用户点击取消或关闭对话框
                console.error(error);
            }
        },
        // 关闭弹窗时
        handleClose() {
            this.addform = {
                zh_tw_name: '',
                zh_tw_description: '',
                sort: '',
                en_name: '',

            }
            this.$refs.fileInput1.value = null
            this.roleHeadgear = ''
        },
        handleClosetable() {

        },
        // 分页
        current_change(currentPage) {
            this.currentPage = currentPage;
            this.get_teacherList();
        },
        // 重置
        resetForm() {
            this.form = {
                admin_name: ''
            }
            this.currentPage = 1
            this.get_teacherList();
        },
        // 编辑打开时
        tableEditing(row) {
            this.titles = '编辑'
            this.dialogVisible = true
            this.addform.id = row.id
            this.addform.zh_tw_name = row.zh_tw_name
            this.addform.en_name = row.en_name
            this.addform.zh_tw_description = row.zh_tw_description
            this.addform.en_name = row.en_name
            this.addform.sort = row.sort

        },
        // 新增打开时
        addbtn() {
            this.dialogVisible = true;
            this.titles = '新增'
        },
    },
};
</script>
<style>
.cell {
    font-size: 12px;
    white-space: nowrap !important;
}

.el-dialog__body {
    padding: 0 10px !important;
}

.demo-table-expand {
    font-size: 0;
    margin-left: 10px;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
<style lang="less" scoped>
.DealerInfoStyle {
    width: 100%;
    padding: 0 10px;
    // background-color: aquamarine;
    height: calc(100vh - 100px);
    // border: 1px #000 solid;

    .cardAdmin {
        position: relative;
        // height: 18%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0;

        border: #ebeef5 solid 1px;
        padding: 0 5px;
        margin-bottom: 2px;


        .fgwqefwqefewr13413fsaf {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            align-self: baseline;
            padding-bottom: 40px;
        }

        .formSearch {
            width: 25%;
            min-width: 25%;
            margin: 10px 0;
            height: 40px;
            display: flex;
            justify-content: center;
        }
    }

    .pop-up-form {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        align-self: baseline;
        margin: 10px 0;

        .form-options {
            width: 100%;
            min-width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            margin: 10px 0;
        }
    }
}
</style>
  